<template>
    <div class="border px-2 py-1 rounded mr-3 position-relative d-flex align-items-center">
        <div class="d-flex align-items-center" v-if="type != 0">
            <!-- 颜色选择 -->
            <el-color-picker size="mini" v-if="type === 1" :value='item.color'
            @change="changeColor"></el-color-picker>
            <!-- 图片选择 -->
            <template v-else>
                <!-- 如果image中没有图片 就显示+号 否则显示图片 -->
                <div class="btn btn-light border" v-if="!item.image">
                    <i class="el-icon-plus" @click="choose"></i>
                </div>
                <img v-else :src="item.image" class="rounded" style="width:35px;height:35px;cursor:pointer" @click="choose">
            </template>
            
        </div>
        <input :value="item.name" class="form-control text-center border-0 p-0" 
        style='width: 80px;font-size: 15px' @input="inputChange">
        <span class="btn btn-light p-0 position-absolute" 
        style="line-height: 1;top: -10px; right: -10px" 
        @click="delSkuValue({cardIndex, valueIndex:index})">
            <i class="el-icon-circle-close"></i>
        </span>
    </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
   data() {
      return {
      }
   },
   inject: ['app'],
   components: {
   },
   props: {
       type: Number,
       item: Object,
       index: Number,
       cardIndex: Number
   },
   created(){
   },
   computed:{
   },
   watch:{
   },
   methods:{
       ...mapMutations(['delSkuValue', 'updateSkuValue']),
       inputChange(e) {
           this.vModel('name', e.target.value)
       },
       vModel(key, value) {
           this.updateSkuValue({
               cardIndex: this.cardIndex,
               valueIndex: this.index,
               key,
               value
           })
       },
       choose() {
        //    接收image-dialog传来的chooselist数组，即res就是chooselist
           this.app.chooseImage(res => {
               this.vModel('image', res[0].url)
           },3)
       },
    //    修改规格属性的颜色
       changeColor(e) {
        //    同时修改颜色和颜色名字
           this.vModel('color',e)
           this.vModel('name', e)
       }
   },
}
</script>
<style lang="less" scoped>

</style>
